<template>
  <div id="app">
    <el-container>
      <el-header
        style="position: fixed; width: 100%; left: 0; top: 0; z-index: 1030 !important; padding: 0; background-color: #252a2f;"
      >
        <anim-header
          :username="username"
          :urlHome="urlHome"
          @changePwd="changePwd"
          @logout="logout"
        ></anim-header>
      </el-header>
      <el-main style="position: absolute; width: 100%; top: 60px; bottom: 0; padding: 0;">
        <el-container>
          <el-aside
            style="position: fixed; left: 0; top: 60px; bottom: 0; width: 240px; background-color: #252a2f;"
          >
            <anim-left :dataUserMenu="dataUserMenu" :urlHome="urlHome" :menuActive="menuActive"></anim-left>
          </el-aside>
          <el-main style="margin-left: 240px;">
            <router-view/>
          </el-main>
        </el-container>
      </el-main>
    </el-container>

    <el-dialog
      title="修改密码"
      :visible.sync="dialogChangePwdVisible"
      width="500px"
      @close="dialogChangePwdClose"
    >
      <el-form ref="formChangePwd" :model="modelChangePwd" status-icon :rules="rulesChangePwd">
        <el-form-item label="旧密码" :label-width="formChangePwdLabelWidth" prop="oldPassword">
          <el-input v-model="modelChangePwd.oldPassword" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formChangePwdLabelWidth" prop="newPassword">
          <el-input v-model="modelChangePwd.newPassword" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="确认新密码"
          :label-width="formChangePwdLabelWidth"
          prop="newPasswordConfirm"
        >
          <el-input v-model="modelChangePwd.newPasswordConfirm" type="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChangePwdVisible = false">取 消</el-button>
        <el-button type="primary" :loading="isButtonLoadingChangePwd" @click="onSubmitChangePwd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AnimLeft from './components/common/Left'
import AnimHeader from './components/common/Header'
import { getAPI } from './assets/js/resources.js'
var Qs = require('qs')

export default {
  name: 'App',
  components: { AnimHeader, AnimLeft },
  data() {
    var checkOldPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入旧密码'))
      } else {
        callback()
      }
    }
    var checkNewPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入新密码'))
      } else if (value === this.modelChangePwd.oldPassword) {
        callback(new Error('新旧密码不能相同!'))
      } else {
        callback()
      }
    }
    var checkNewPasswordConfirm = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请再次输入新密码'))
      } else if (value !== this.modelChangePwd.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      urlHome: getAPI('URL_INDEX') + '/#/',
      menuActive: getAPI('URL_INDEX') + '/#/',
      dataUserMenu: [],
      username: '[用户名]',
      userToken: '',
      modelChangePwd: {
        oldPassword: '',
        newPassword: '',
        newPasswordConfirm: ''
      },
      rulesChangePwd: {
        oldPassword: [{ validator: checkOldPassword, trigger: 'blur' }],
        newPassword: [{ validator: checkNewPassword, trigger: 'blur' }],
        newPasswordConfirm: [
          { validator: checkNewPasswordConfirm, trigger: 'blur' }
        ]
      },
      dialogChangePwdVisible: false,
      formChangePwdLabelWidth: '100px',
      isButtonLoadingChangePwd: false
    }
  },
  methods: {
    loadUserMenu() {
      if (this.userToken) {
        var that = this
        this.$axios
          .get(getAPI('API_GET_USER_MENU') + that.userToken)
          .then(function(response) {
            if (response.data.status === 200) {
              that.dataUserMenu = response.data.data
              that.handleMenu(that.dataUserMenu)
            } else {
              location.href = getAPI('URL_LOGIN')
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      }
    },
    handleMenu(menuList) {
      var that = this
      menuList.forEach(function(item, index) {
        if (item.data.url) {
          switch (item.data.system) {
            case 'home':
              item.data.url = getAPI('URL_INDEX') + '/#' + item.data.url
              break
            case 'cms':
              item.data.url = getAPI('URL_INDEX_CMS') + '/#' + item.data.url
              break
          }
        }
        if (item.children) {
          that.handleMenu(item.children)
        }
      })
    },
    getUser() {
      if (this.userToken) {
        var that = this
        this.$axios
          .get(getAPI('API_GET_USER_BY_TOKEN') + that.userToken)
          .then(function(response) {
            if (response.data.status === 200) {
              var username = response.data.data.username
              that.username = username
            } else {
              location.href = getAPI('URL_LOGIN')
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      }
    },
    changePwd() {
      this.dialogChangePwdVisible = true
    },
    resetFormChangePwd() {
      this.modelChangePwd = {
        oldPassword: '',
        newPassword: '',
        newPasswordConfirm: ''
      }
      this.$refs.formChangePwd.resetFields()
    },
    dialogChangePwdClose() {
      this.resetFormChangePwd()
    },
    onSubmitChangePwd() {
      if (this.userToken) {
        this.$refs.formChangePwd.validate(valid => {
          if (valid) {
            this.isButtonLoadingChangePwd = true
            var that = this
            this.$axios({
              method: 'post',
              url: getAPI('API_POST_CHANGE_PWD') + that.userToken,
              // 序列化为&格式
              data: Qs.stringify(that.modelChangePwd)
            })
              .then(function(response) {
                if (response.data.status === 200) {
                  that.$message({
                    message: '修改成功',
                    type: 'success'
                  })
                  that.isButtonLoadingChangePwd = false
                  that.dialogChangePwdVisible = false
                } else {
                  that.$message.error(response.data.msg)
                  that.resetFormChangePwd()
                  that.isButtonLoadingChangePwd = false
                }
              })
              .catch(function(error) {
                console.log(error)
              })
          }
        })
      }
    },
    logout() {
      if (this.userToken) {
        var that = this
        this.$axios
          .get(getAPI('API_GET_LOGOUT') + that.userToken)
          .then(function(response) {
            if (response.data.status === 200) {
              location.href = getAPI('URL_LOGIN')
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  },
  created() {
    // 从cookie获取token
    this.userToken = this.$cookies.get('NIX_ANIM_USER_SESSION')
    if (!this.userToken) {
      location.href = getAPI('URL_LOGIN')
    }
    // 加载用户菜单
    this.loadUserMenu()
    this.menuActive = window.location.href;
    // 通过token获取用户信息
    this.getUser()
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.el-menu {
  border-right: 0;
}
.el-menu--horizontal > .el-menu-item {
  float: right;
}
.el-menu--horizontal > .el-submenu {
  float: right;
}
.el-menu-item a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.el-menu-item.is-active a {
  color: rgb(0, 193, 222);
}
.el-input-group__prepend {
  width: 80px;
}
</style>
